<template>
  <div
    style="width: 100%; position: relative; margin-bottom: 10px"
    v-if="showForm"
  >
    <!--        <div class="open_close" @click="clickOpenClose">
                <i :class="open?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
                {{ open ? "收起" : "展开" }}
            </div>-->
    <div v-show="open" :class="open ? 'show' : 'hidden'" class="search-box">
      <el-form
        class="formData"
        size="mini"
        :model="formData"
        label-width="130px"
      >
        <template v-for="item in searchList">
          <el-col :span="item.colSpan ? item.colSpan : 12" :key="item.prop">
            <el-form-item :label="item.label">
              <el-input
                v-if="!item.type"
                :placeholder="item.placeholder || '请输入 ' + item.label"
                v-model="formData[item.prop]"
              >
              </el-input>

              <el-date-picker
                v-if="item.type === 'datetimerange'"
                v-model="formData[item.prop]"
                type="datetimerange"
                 size="mini"
                 format="yyyy-MM-dd HH:mm:ss"
                 value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>

              <el-checkbox-group
                v-if="item.type === 'checkbox'"
                v-model="formData[item.prop]"
                @change="filterNoVal"
              >
                <template v-if="item.dicData">
                  <template v-for="option in item.dicData">
                    <el-checkbox
                      :label="option.label"
                      :key="option.value"
                      :value="option.value"
                    >
                    </el-checkbox>
                  </template>
                </template>
              </el-checkbox-group>

              <el-radio-group
                v-if="item.type === 'radio'"
                v-model="formData[item.prop]"
                @change="filterNoVal"
              >
                <template v-if="item.dicData">
                  <template v-for="option in setAllOption(item.dicData)">
                    <el-radio :label="option.value" :key="option.value">{{
                      option.label
                    }}</el-radio>
                  </template>
                </template>
              </el-radio-group>

              <el-select
                style="width: 100%"
                filterable
                :placeholder="'请选择 ' + item.label"
                v-if="item.type === 'select' && item.dicData"
                v-model="formData[item.prop]"
              >
                <template v-if="item.dicData">
                  <template v-for="option in setAllOption(item.dicData)">
                    <el-option
                      :label="option.label"
                      :key="option.value"
                      :value="option.value"
                    >
                    </el-option>
                  </template>
                </template>
              </el-select>

              <el-select
                v-if="item.type === 'select' && !item.dicData"
                style="width: 100%"
                filterable
                :placeholder="'请选择 ' + item.label"
                v-model="formData[item.prop]"
              >
                <template v-for="option in dicUrlData[item.prop]">
                  <el-option
                    :label="option[item.props.label]"
                    :key="option[item.props.value]"
                    :value="option[item.props.value]"
                  ></el-option>
                </template>
              </el-select>

              <el-select-tree
                v-if="item.type === 'tree' && !item.dicData"
                style="width: 100%"
                size="mini"
                :options="dicUrlData[item.prop]"
                :placeholder="'请选择 ' + item.label"
                :value.sync="formData[item.prop]"
              >
              </el-select-tree>
            </el-form-item>
          </el-col>
        </template>
      </el-form>
      <div class="searchBtn">
        <div>
          <el-button size="mini" type="primary" @click="filterNoVal"
            >筛选</el-button
          >
          <el-button size="mini" @click="restFormData">重置</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/router/axios";
import ElSelectTree from "@/components/el-select-tree.vue";

export default {
  name: "MSSearch",
  components: { ElSelectTree },
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    that: Function,
  },
  data() {
    return {
      formData: {},
      dicUrlData: {},
      open: true,
    };
  },
  computed: {
    searchList() {
      let array = [];
      this.list.forEach((item) => {
        if (item.msSearch) {
          array.push(item);
          if (item.dicUrl) {
            request({
              url: item.dicUrl,
              method: "get",
            }).then((res) => {
              let obj = {};
              obj[item.props.value] = "";
              obj[item.props.label] = "全部";
              res.data.data.unshift(obj);
              this.$set(this.dicUrlData, item.prop, res.data.data);
              if (item.initFirst) {
                this.$set(this.formData, item.prop, res.data.data[1].id);
                this.$emit("searchClick", this.formData);
              }
            });
          }
        }
      });
      array.sort((a, b) => a.searchOrder - b.searchOrder);
      return array;
    },
    showForm() {
      let num = 0;
      for (const key in this.formData) {
        num++;
      }
      return num > 0;
    },
  },
  methods: {
    /**
     * 过滤空字符串及不合理值
     * */
    filterNoVal() {
      let form = {};
      for (const key in this.formData) {
        if (this.formData[key] !== null && this.formData[key] !== undefined) {
          if (
            typeof this.formData[key] === "string" &&
            this.formData[key].trim().length !== 0
          ) {
            form[key] = this.formData[key];
          }
          if (typeof this.formData[key] !== "string") {
            form[key] = this.formData[key];
          }
        }
      }
      this.$emit("searchClick", form);
    },
    clickOpenClose() {
      this.open = !this.open;
      this.$emit("oc");
    },

    setAllOption(dicData, item, byUrl = false) {
      let data = this.deepCopy(dicData);
      if (!byUrl) {
        let obj = {};
        obj["value"] = "";
        obj["label"] = "全部";
        data.unshift(obj);
      } else {
        let obj = {};
        obj[item.props.value] = "";
        obj[item.props.label] = "全部";
        data.unshift(obj);
      }
      return data;
    },
    restFormData() {
      this.formData = this.setSearchForm(this.list);
      this.queryForm = this.formData;
      this.$emit("searchClick", {});
    },
  },
  mounted() {},
  created() {},
  watch: {
    list: {
      handler(v) {
        this.formData = this.setSearchForm(v);
        this.queryForm = this.formData;
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style scoped lang="scss">
.open_close {
  font-size: 13px;
  cursor: pointer;
  text-align: right;
}

.search-enter-active,
.search-leave-active {
  transition: all 0.4s;
}

.search-enter,
.search-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}

.formData {
  width: 65%;
  height: auto;
  margin: auto;
  padding-left: -130px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;

  ::v-deep .el-col {
    .el-form-item {
      .el-form-item__label {
        font-size: 13px;
      }

      .el-form-item__content {
        font-size: 12px;

        .el-radio-group {
          font-size: 12px;

          .el-radio {
            .el-radio__label {
              font-size: 12px;
            }
          }
        }
      }
    }
  }

  .el-form-item {
    margin-bottom: 0;
  }
}

.searchBtn {
  min-width: 150px;
  position: absolute;
  //bottom: 17%;
  height: 100%;
  bottom: 0;
  right: 2%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 8px;
}
</style>
